<template>
  <div class="treeWrap">
    <div class="head" v-if="title">
      <span class="title">{{ title }}</span>
      <CloseOutlined class="close" @click.native="handleClose"></CloseOutlined>
    </div>
    <StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
    <template v-else>
      <a-input v-model:value="inputValue" placeholder="搜索摄像头" @pressEnter="handlePressEnter" />
      <a-tree
        showLine
        :checkable="true"
        :expandedKeys="expandedKeys"
        :selectedKeys="selectedKeys"
        :checkedKeys="checkedKeys"
        :autoExpandParent="autoExpandParent"
        :treeData="treeSource"
        @expand="handleExpand"
        @select="handleSelect"
        @check="handleCheck"
        :fieldNames="{ title: `${name}`, key: `${id}`, children: `${children}` }"
      >
        <template #title="item">
          <span class="name" v-if="searchValue && item[name].indexOf(searchValue) != -1">
            {{ item[name].substr(0, item[name].indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span
            >{{ item[name].substr(item[name].indexOf(searchValue) + searchValue.length) }}
          </span>
          <span class="name" v-else>{{ item[name] }}</span>
        </template>
      </a-tree>
    </template>
  </div>
</template>

<script setup name="tree">
  import StatusTip from '@/components/StatusTip/index.vue';
  import res from './data';
  import { ref, reactive, watch, onMounted } from 'vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    treeData: Array,
    name: String,
    id: String,
    children: String,
    parentId: String,
    title: String
  });
  const emit = defineEmits(['onChecked', 'onSelected', 'onClose']);
  const pageTip = reactive({
    show: true,
    status: 0
  });
  const treeSource = ref([]);
  const autoExpandParent = ref(true);
  const expandedKeys = ref([]);
  const checkedKeys = ref([]);
  const selectedKeys = ref([]);
  const inputValue = ref('');
  const searchValue = ref('');

  /** */
  const handleExpand = (keys, { expanded, node }) => {
    let key = node[props.id];
    expand(key);
  };
  /** */
  const handleSelect = (keys, { node }) => {
    if (node[props.children]) {
      expand(node[props.id]);
    } else {
      selectedKeys.value = [...keys];
      emit('onSelected', keys);
    }
  };
  /** */
  const handleCheck = (keys, { checked, checkedNodes }) => {
    checkedKeys.value = keys;
    emit('onChecked', keys);
  };
  /** 去掉祖先级的key */
  const delParentKey = (key, data, checkedData) => {
    let parentKey = byKeyFindParentKey(key, data, props.id, props.children);
    parentKey.forEach(item => {
      let findIndex = checkedData.findIndex(fItem => fItem[props.id] == item[props.id]);
      if (findIndex != -1) {
        checkedData.splice(findIndex, 1);
      }
    });
    return checkedData;
  };
  /** 通过key递归出它的祖先 */
  function byKeyFindParentKey(id, data, idKey, childrenKey) {
    const result = [];
    for (let i = 0, len = data.length; i < len; i++) {
      let item = data[i];
      if (item[idKey] == id) {
        return true;
      } else {
        if (item[childrenKey]?.length) {
          let obj = byKeyFindParentKey(id, item[childrenKey]);
          if (typeof obj === 'boolean') {
            return [...result, item[idKey]];
          } else if (obj?.length) {
            return [item[idKey], ...obj];
          }
        }
      }
    }
    return result;
  }
  /** */
  const expand = key => {
    const data = [...expandedKeys.value];
    let findIndex = data.findIndex(item => item == key);
    if (findIndex == -1) {
      data.push(key);
      expandedKeys.value = data;
    } else {
      data.splice(findIndex, 1);
      expandedKeys.value = data;
    }
  };
  /** */
  const handlePressEnter = () => {
    searchValue.value = inputValue.value;
  };
  /** */
  const execute = data => {
    treeSource.value = data;
    expandedKeys.value = data.map(item => item[props.id]);
    pageTip.show = false;
  };
  /** */
  const handleClose = () => {
    emit('onClose');
  };
  if (props.treeData?.length) {
    execute(props.treeData);
  } else {
    setTimeout(() => {
      pageTip.show = true;
      let { code, data } = res;
      if (code == 200) {
        if (data?.length) {
          execute(data);
        } else {
          pageTip.status = 1;
        }
      } else {
        pageTip.status = 2;
      }
    }, 0);
  }
</script>
<style lang="less" scoped>
  @gap: 16px;
  .treeWrap {
    padding: 16px @gap;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.1);
    .head {
      height: 28px;
      margin: 0 -16px 10px;
      line-height: 16px;
      display: flex;
      padding: 0 12px 12px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ececec;
      .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
      .close {
        cursor: pointer;
      }
    }
    :deep(.ant-input) {
      background: #f2f3f5;
      border-radius: 4px;
      border: none;
      box-shadow: none;
      margin-bottom: 20px;
      height: 32px;
    }
    // :deep(.ant-tree) {
    // 	flex: 1;
    // 	overflow: overlay;
    // 	margin: 0 -@gap;
    // 	.ant-tree-treenode-selected {
    // 		width: 100%;
    // 		color: #146aff;
    // 		background: rgba(20, 106, 255, 0.08);
    // 	}
    // 	.ant-tree-switcher {
    // 		padding-top: 5px;
    // 	}
    // 	.ant-tree-treenode {
    // 		padding: 0;
    // 	}
    // 	.ant-tree-node-content-wrapper {
    // 		&:hover {
    // 			background-color: transparent;
    // 		}
    // 		&.ant-tree-node-selected {
    // 			background-color: transparent;
    // 		}
    // 	}
    // 	.ant-tree-indent-unit {
    // 		width: 0;
    // 	}
    // }
    :deep(.ant-tree) {
      .ant-tree-switcher-noop {
        visibility: hidden;
      }
    }
    .name {
      display: block;
      // white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 196px;
      // padding: 5px 0;
    }
  }
</style>
